<template>
	<view class="page page-fill">
		<form class="uni-form" @submit="formSubmitNickname">
			<view class="uni-form-item uni-column">
				<label class="title"><text style="color:red;">⁎</text>姓名</label>
				<input class="uni-input" type="text" name="AAC003" v-model="globalUser.AAC003" maxlength="20" />
			</view>
			<view class="uni-form-item uni-column">
				<label class="title"><text style="color:red;">⁎</text>身份证号</label>
				<input class="uni-input" maxlength="18" @confirm="regIdCard" @blur="regIdCard" name="AAC002" type="idcard" v-model="globalUser.AAC002" />
			</view>
			<view class="uni-form-item uni-column">
				<label class="title">社保卡号</label>
				<input class="uni-input" name="AAZ500" type="idcard" placeholder="职工及省外异地就医居民必填!" v-model="globalUser.AAZ500" />
			</view>
	
			<view class="uni-form-item uni-column">
				<label class="title"><text style="color:red;">⁎</text>统筹区</label>
				<view class="uni-input my-picker" @tap="openPopup('province')">{{globalUser.AKC803_NAME}}</view>
			</view>
			<view class="uni-form-item uni-column">
				<label class="title"><text style="color:red;">⁎</text>险种类型</label>

				<picker class="my-picker" mode="selector" :range="safeType" range-key="AAA103" @change="changeSafe">
					<view class="uni-input" name="AAE140">{{globalUser.AAE140_NAME}}</view>
				</picker>
			</view>
			<!-- <button v-if="globalUser.IS_WS!='1'" type="primary" form-type="submit" class="submitBtn">提交</button> -->
			<button type="primary" form-type="submit" class="submitBtn">提交</button>
		</form>
        <areaSelect ref="linkAddress"  :initProvince="initProvince" :height="height" @confirmCallback="confirmCallback">
		</areaSelect>
	</view>
</template>

<script>
	import areaSelect from '@/components/area-select/linkAddress.vue'; 
	export default {
		components: {areaSelect},
		data() {
			return {
				globalUser: {
					AAC003: '', //姓名
					AAC002: '',
					AAZ500: '',
					AKC803: '',
					AKC803_NAME: '',
					AAE140: '',
					AAE140_NAME: '',
					IS_WS: '0'
				},
				height: '500px',
				initProvince:[{"AREA_NAME":"兰州市","AREA_CODE":"620100"},{"AREA_NAME":"嘉峪关市","AREA_CODE":"620200"},{"AREA_NAME":"金昌市","AREA_CODE":"620300"},{"AREA_NAME":"白银市","AREA_CODE":"620400"},{"AREA_NAME":"天水市","AREA_CODE":"620500"},{"AREA_NAME":"武威市","AREA_CODE":"620600"},{"AREA_NAME":"张掖市","AREA_CODE":"620700"},{"AREA_NAME":"平凉市","AREA_CODE":"620800"},{"AREA_NAME":"酒泉市","AREA_CODE":"620900"},{"AREA_NAME":"庆阳市","AREA_CODE":"621000"},{"AREA_NAME":"定西市","AREA_CODE":"621100"},{"AREA_NAME":"陇南市","AREA_CODE":"621200"},{"AREA_NAME":"临夏回族自治州","AREA_CODE":"622900"},{"AREA_NAME":"甘南藏族自治州","AREA_CODE":"623000"},{"AREA_NAME":"甘肃矿区","AREA_CODE":"627000"},{"AREA_NAME":"甘肃省省本级","AREA_CODE":"629900"}],
				cityArr: [],
				areaArr: [],
				multiIndex: [0, 0],
				safeType: [],
			}
		},
		computed: {
			multiArray: function() {
				return [this.cityArr, this.areaArr];
			}
		},
		methods: {
			
			//点击弹出弹窗
			openPopup: function() {
				this.height = '550rpx';
				//显示
				this.show_popup();
			
			},
			//显示弹窗
			show_popup: function() {
				this.$refs.linkAddress.show();
			},
			//回掉
			confirmCallback: function(select) {
				if (select) {
					var index = select.length;
					this.globalUser.AKC803_NAME = select[index - 1].AREA_NAME;
					this.globalUser.AKC803 = select[index - 1].AREA_CODE;;
				}
			},
			// 验证身份证号
			regIdCard() {
				var reg = this.$common.isIdCardNumber(this.globalUser.AAC002);
				var msg = this.globalUser.AAC002 ? '请填写正确的身份证号' : '请填写身份证号'
				console.log(reg);
				if (!reg) {
					uni.showToast({
						title: msg,
						icon: 'none',
						duration: 2000,
					});
					return false;
				} else {
					return true;
				}
			},
			getArr(code) {
				var self = this;
				self.$request("S1012", {
					AREA_CODE: code
				}, "POST", function(res) {
					if (res.data.CODE == 0) {
						self.areaArr = res.data.DATA;
						
						console.log('rr', self.areaArr)
					}
				})
			},
			formSubmitNickname(e) {
				var arr = {
						AAC003: '姓名', //
						AAC002: '身份证号',
						AKC803: '统筹区',
						AAE140: '险种大类',
					},
					self = this;

				for (var key in arr) {
					if (key != 'AAC002' && this.globalUser[key] == '') {
						uni.showToast({
							title: "请完善" + arr[key] + '信息',
							icon: 'none',
							duration: 2000
						});
						return false;
					}
					if (key == 'AAC002') {
						var result = this.regIdCard();
						if (!result) {
							return false;
						}
					}
				}
				if(this.globalUser.AAE140 == '31' && this.globalUser.AAZ500 == ''){
					uni.showToast({
						title: "请完善信息社保卡号",
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				this.$request('S1009', this.globalUser, 'POST', function(res) {
					console.log(res);
					if (res.data.CODE==0) {				
						self.$request('S1010',null,'POST',function(res1) {							
							uni.setStorageSync("userInfo",Object.assign({},self.globalUser,res1.data.DATA) );
							uni.switchTab({
								url: '../me/me'
							})
							
						})
						
						
					} else {
						self.$common.errorToShow(res.data.MSG)
					}
				})
			},
			bindMultiPickerColumnChange(e) {
				if (e.detail.column == 0) {
					var code = this.cityArr[e.detail.value].AREA_CODE;
					this.getArr(code);
				}

			},
			changeValue(e) {
				var result = e.detail.value;
				if (result.length == 2) {
					this.globalUser.AKC803 = this.areaArr[result[1]].AREA_CODE;
					this.globalUser.AKC803_NAME = this.areaArr[result[1]].AREA_NAME;
				}

			},
			changeSafe(e) {
				this.globalUser.AAE140 = this.safeType[e.detail.value].AAA102;
				this.globalUser.AAE140_NAME = this.safeType[e.detail.value].AAA103;

			},
			
			getArea() {
				if(this.globalUser.AAC002==''||this.globalUser.AAC003==''){
					return ;
				}
				var param = {
				  AAC002:this.globalUser.AAC002,
				  AAC003:this.globalUser.AAC003,
				}
				this.$request('S1025', param, 'POST', function(res) {
					console.log(res);
					if (res.data.CODE==0) {
						res.data.DATA.AKC803;//统筹区编码
						res.data.DATA.AKC803_NAME;//统筹区名称
					} else {
						self.$common.errorToShow(res.data.MSG)
					}
				})
			
			},

		},
		onShow() {
			var self = this;
			var userInfo = uni.getStorageSync("userInfo");
	
			for (var key in userInfo) {
				this.globalUser[key] = userInfo[key];
			}

			this.$request("S1012", {
				AREA_CODE: "620000"
			}, "POST", function(res) {
				if (res.data.CODE == 0) {
					self.cityArr = res.data.DATA;
					self.getArr(self.cityArr[0].AREA_CODE);
				}
			})

			this.$request("S8888", {
				AAA100: "AAE140"
			}, "POST", function(res) {
				if (res.data.CODE == 0) {
					self.safeType = res.data.DATA;
					if(self.globalUser.AAE140){
						self.globalUser.AAE140_NAME = _.filter(self.safeType, {
							AAA102: self.globalUser.AAE140
						})[0].AAA103;
					}
				}
			})
		}
	}
</script>

<style>
	.page-fill {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.uni-form-item .uni-input {
		flex-grow: 1;
		flex-shrink: 1;
		justify-content: flex-end;
		text-align: right;
	}

	.uni-input-input {}

	.graywords {
		color: #EAEAEA;
	}

	.submitBtn {
		width: 95%;
		margin-top: 40upx;
	}
</style>
